{ "err_no": 0, "err_msg": "success", "data": { "booklet": { "booklet_id": "6844733759942557704", "base_info": { "id": 0, "booklet_id": "6844733759942557704", "title": "Vue.js 组件精讲", "price": 2990, "category_id": "6809637767543259144", "status": 1, "user_id": "149189280930478", "verify_status": 2, "summary": "iView 作者 3 年的 Vue.js 组件开源积累，Vue.js 组件知识深入剖析", "cover_img": "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/18/167c119a41e444d5~tplv-t2oaga2asx-image.image", "section_count": 20, "section_ids": "6844733759967723533|6844733760118718477|6844733760135512078|6844733760139689991|6844733760139689997|6844733760139706376|6844733760143884296|6844733760143884302|6844733760144211975|6844733760148078599|6844733760148078606|6844733760148078600|6844733760152272903|6844733760152272904|6844733760152289287|6844733760152272910|6844733760156467213|6844733760156467208|6844733760156483598|6844733760160661518|6844733760160677902", "is_finished": 1, "ctime": 1545131098, "mtime": 1655275955, "put_on_time": 1598288810, "pull_off_time": 1598288668, "finished_time": 1596106629, "recycle_bin_time": -62135596800, "verify_time": -62135596800, "submit_time": 1642382193, "top_time": -62135596800, "wechat_group_img": "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd6f4cff886241ffbfe63ed29338f922~tplv-k3u1fbpfcp-watermark.image?", "wechat_group_desc": "小册九姐", "wechat_group_signal": "vue2018", "read_time": 13708, "buy_count": 6465, "course_type": 1, "background_img": "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3416bb3282644ac9b7fb4fc97c239188~tplv-k3u1fbpfcp-watermark.image?", "is_distribution": 0, "distribution_img": "", "commission": 598, "can_vip_borrow": true, "is_sign": false }, "reading_progress": { "id": 0, "booklet_id": "6844733759942557704", "user_id": "3210229681503629", "status": 1, "buy_type": 1, "reading_end": 0, "reading_progress": 0, "last_section_id": "0", "has_update": 1, "last_rtime": 1545191504, "ctime": 1545191504, "mtime": 1658224945, "valid_begin_time": 0, "valid_end_time": 0, "borrow_times": 0 }, "user_info": { "user_id": "149189280930478", "user_name": "Aresn", "company": "视图更新科技", "job_title": "创始人", "avatar_large": "https://p9-passport.byteacctimg.com/img/user-avatar/be57fc52019c6a668516a3d880e1ab95~300x300.image", "level": 5, "description": "iView 作者，《Vue.js 实战》、《Vue.js 组件精讲》作者", "followee_count": 31, "follower_count": 8475, "post_article_count": 49, "digg_article_count": 227, "got_digg_count": 6390, "got_view_count": 332471, "post_shortmsg_count": 33, "digg_shortmsg_count": 47, "isfollowed": false, "favorable_author": 1, "power": 10105, "study_point": 0, "university": { "university_id": "0", "name": "", "logo": "" }, "major": { "major_id": "0", "parent_id": "0", "name": "" }, "student_status": 0, "select_event_count": 0, "select_online_course_count": 0, "identity": 0, "is_select_annual": false, "select_annual_rank": 0, "annual_list_type": 0, "extraMap": {}, "is_logout": 0, "annual_info": [], "account_amount": 0, "user_growth_info": { "user_id": 149189280930478, "jpower": 0, "jscore": 316.6, "jpower_level": 0, "jscore_level": 4, "jscore_title": "进阶掘友", "author_achievement_list": [], "vip_level": 0, "vip_title": "" }, "is_vip": false }, "event_discount": null, "is_buy": true, "section_updated_count": 20, "is_new": false }, "introduction": { "id": 81539, "section_id": "6844733759967723533", "title": "介绍", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "

小册介绍

\n

\"\"

\n

Vue.js 无疑是前端最热门的框架之一，而 Vue.js 最精髓的，正是它的组件。写一个 Vue 工程，也就是在写一个个的组件。换言之，学好了 Vue.js 的组件，也就能很好地驾驭 Vue.js 框架和千变万化的复杂业务场景。

\n

如今，关于 Vue.js 的教程已经非常丰富，大部分开发者阅读文档后，都可以很快上手 Vue.js 的开发，而写好每一个组件，成了当前众多开发者的一个难题。

\n

Vue.js 的组件和组件化在使用中有非常多的技巧和最佳实践，本小册则针对 Vue.js 最核心的部分—组件，来深入讲解，带着完整示例来解决一个个与组件相关的疑难点和知识点。

\n

同时，作为 Vue.js 知名组件库 iView 的作者，深入开发超过 50 个极其复杂的通用组件，包含了 Vue.js 组件的各个场景，对 Vue.js 的组件开发，有着独树一帜的见解和经验。

\n

作者介绍

\n

\"\"

\n

Aresn，基于 Vue.js 的开源 UI 组件库 — iView 的作者（GitHub 超过 20000 星）。前大数据公司 TalkingData 前端架构师。畅销书籍《Vue.js实战》的作者（Vue.js 作者尤雨溪作序，销量超 4 万册）。在掘金发表众多关于 Vue.js 的技术文章，获得点赞 7000+，阅读 24 万+。更多介绍可以阅读文章 《2016我的心路历程：从 Vue 到 Webpack 到 iView》。

\n

你会学到什么？

\n\n

适宜人群

\n\n

购买须知

\n
    \n
  1. 本小册为图文形式内容服务，共计 20 节；
    2. \n
  2. 文章已全部更新完毕；
    3. \n
  3. 购买用户可享有小册永久的阅读权限；
    4. \n
  4. 购买用户可进入小册微信群，与作者互动；
    5. \n
  5. 掘金小册为虚拟内容服务，一经购买成功概不退款；
    6. \n
  6. 掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
    7. \n
  7. 在掘金小册阅读过程中，如有任何问题，请邮件联系 xiaoce@xitu.io
    8. \n
", "draft_content": "", "draft_title": "介绍", "markdown_content": "", "markdown_show": "", "is_free": 1, "read_time": 147, "read_count": 0, "comment_count": 0, "ctime": 1545131098, "mtime": 1569378036, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, "sections": [ { "id": 76407, "section_id": "6844733760118718477", "title": "开篇：Vue.js 的精髓——组件", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "开篇：Vue.js 的精髓——组件", "markdown_content": "", "markdown_show": "", "is_free": 1, "read_time": 414, "read_count": 14509, "comment_count": 66, "ctime": 1539851286, "mtime": 1595213748, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76408, "section_id": "6844733760135512078", "title": "基础：Vue.js 组件的三个 API：prop、event、slot", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "基础：Vue.js 组件的三个 API：prop、event、slot", "markdown_content": "", "markdown_show": "", "is_free": 1, "read_time": 417, "read_count": 13094, "comment_count": 75, "ctime": 1539851428, "mtime": 1595676467, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76409, "section_id": "6844733760139689991", "title": "组件的通信 1：provide / inject", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "组件的通信 1：provide / inject", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 479, "read_count": 8798, "comment_count": 85, "ctime": 1539851587, "mtime": 1591347561, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76413, "section_id": "6844733760139689997", "title": "组件的通信 2：派发与广播——自行实现 dispatch 和 broadcast 方法", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "组件的通信 2：派发与广播——自行实现 dispatch 和 broadcast 方法", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 569, "read_count": 8311, "comment_count": 127, "ctime": 1539915535, "mtime": 1590589470, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76533, "section_id": "6844733760139706376", "title": "实战 1：具有数据校验功能的表单组件——Form", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "实战 1：具有数据校验功能的表单组件——Form", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1359, "read_count": 8326, "comment_count": 106, "ctime": 1540881834, "mtime": 1590542878, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76538, "section_id": "6844733760143884296", "title": "组件的通信 3：找到任意组件实例——findComponents 系列方法", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "组件的通信 3：找到任意组件实例——findComponents 系列方法", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 648, "read_count": 5246, "comment_count": 94, "ctime": 1540981995, "mtime": 1595412068, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76555, "section_id": "6844733760143884302", "title": "实战 2：组合多选框组件——CheckboxGroup & Checkbox", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "实战 2：组合多选框组件——CheckboxGroup & Checkbox", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 827, "read_count": 4399, "comment_count": 73, "ctime": 1541148249, "mtime": 1594713431, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76596, "section_id": "6844733760144211975", "title": "Vue 的构造器——extend 与手动挂载——$mount", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "Vue 的构造器——extend 与手动挂载——$mount", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 282, "read_count": 4610, "comment_count": 30, "ctime": 1541560216, "mtime": 1569106585, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76600, "section_id": "6844733760148078599", "title": "实战 3：动态渲染 .vue 文件的组件—— Display", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "实战 3：动态渲染 .vue 文件的组件—— Display", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 677, "read_count": 3941, "comment_count": 32, "ctime": 1541639928, "mtime": 1586999195, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76606, "section_id": "6844733760148078606", "title": "实战 4：全局提示组件——$Alert", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "实战 4：全局提示组件——$Alert", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 635, "read_count": 4535, "comment_count": 35, "ctime": 1541838726, "mtime": 1591400746, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76630, "section_id": "6844733760148078600", "title": "更灵活的组件：Render 函数与 Functional Render", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "更灵活的组件：Render 函数与 Functional Render", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 842, "read_count": 3948, "comment_count": 21, "ctime": 1542090672, "mtime": 1595555176, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76657, "section_id": "6844733760152272903", "title": "实战 5：可用 Render 自定义列的表格组件——Table", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "实战 5：可用 Render 自定义列的表格组件——Table", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1214, "read_count": 3207, "comment_count": 12, "ctime": 1542275167, "mtime": 1590396307, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76697, "section_id": "6844733760152272904", "title": "实战 6：可用 slot-scope 自定义列的表格组件——Table", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "实战 6：可用 slot-scope 自定义列的表格组件——Table", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1287, "read_count": 2802, "comment_count": 12, "ctime": 1542623056, "mtime": 1590325250, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76704, "section_id": "6844733760152289287", "title": "递归组件与动态组件", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "递归组件与动态组件", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 450, "read_count": 2985, "comment_count": 12, "ctime": 1542858663, "mtime": 1594805321, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76743, "section_id": "6844733760152272910", "title": "实战 7：树形控件——Tree", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "实战 7：树形控件——Tree", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 880, "read_count": 3546, "comment_count": 31, "ctime": 1543302343, "mtime": 1592828875, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76758, "section_id": "6844733760156467213", "title": "拓展：Vue.js 容易忽略的 API 详解", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "拓展：Vue.js 容易忽略的 API 详解", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 667, "read_count": 3577, "comment_count": 30, "ctime": 1543397077, "mtime": 1587262073, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76795, "section_id": "6844733760156467208", "title": "拓展：Vue.js 面试、常见问题答疑", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "拓展：Vue.js 面试、常见问题答疑", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 675, "read_count": 3608, "comment_count": 17, "ctime": 1543485370, "mtime": 1588647372, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76862, "section_id": "6844733760156483598", "title": "拓展：如何做好一个开源项目（上篇）", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "拓展：如何做好一个开源项目（上篇）", "markdown_content": "", "markdown_show": "", "is_free": 1, "read_time": 491, "read_count": 4022, "comment_count": 3, "ctime": 1544002271, "mtime": 1594807531, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76863, "section_id": "6844733760160661518", "title": "拓展：如何做好一个开源项目（下篇）", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "拓展：如何做好一个开源项目（下篇）", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 659, "read_count": 1789, "comment_count": 8, "ctime": 1544002320, "mtime": 1556794206, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 76864, "section_id": "6844733760160677902", "title": "写在最后", "user_id": "149189280930478", "booklet_id": "6844733759942557704", "status": 1, "content": "", "draft_content": "", "draft_title": "写在最后", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 89, "read_count": 1454, "comment_count": 32, "ctime": 1544002986, "mtime": 1591770632, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null } ] } }